<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/参保档案.css" />
    <link rel="stylesheet" href="../../icon-font-css/lifei-font/iconfont.css" />
    <title>参保档案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="header">
        <div class="logo">
            <span style="font-size: 25px;" class="iconfont icon-oabangong-copy"></span>
            <span class="title"><strong>办公后台系统</strong></span>
        </div>
        <div class="category">
            <ul class="category-content">
                <li><a href="../index.html">工作台</a></li>
                <li><a href="">数据大屏</a></li>
                <li><a href="">员工</a></li>
                <li><a href="">组织</a></li>
                <li><a href="">招聘</a></li>
                <li><a href="">考勤</a></li>
                <li><a href="">薪酬</a></li>
                <li><a href="">社保公积金</a></li>
                <li><a href="">绩效</a></li>
                <li><a href="">培训</a></li>
                <li><a href="">审批</a></li>
                <li><a href="">权限设置</a></li>
            </ul>
        </div>
    </div>

    <div class="bg">
        <div class="nav">
            <div class="nav-name"><span>社保公积金</span></div>
            <div id="nc" class="nav-content">
                <div id="yui"><a href="./参保方案.html">参保方案</a></div>
                <div><a href="./参保档案.html">参保档案</a></div>
                <div><a href="./参保账单.html">参保账单</a></div>
            </div>
        </div>
        <div class="content">

            <div class="search-box">
                <div class="plan-name">
                    <div class="vbn"></div>
                    <div class="bnm">参保档案</div>
                </div>

                <div class="search-box-top123">
                    <!-- 搜索1 -->
                    <div class="search-box-top1">
                        <span>姓名：</span>
                        <div class="search-box1">
                            <div class="search"><input type="text" id="search1" placeholder=""></div>
                        </div>

                    </div>
                    <!-- 搜索2 -->
                    <div class="search-box-top2">
                        <span>职位：</span>
                        <div class="search-box1">

                            <div class="search"><input type="text" id="search2" placeholder="">

                            </div>

                        </div>
                       <!--  <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">前端开发</a></li>
                                <li><a href="#">后端开发</a></li>

                            </ul>
                        </div> -->
                    </div>
                    <div class="search-box-top3">
                        <span>部门：</span>
                        <div class="search-box1">

                            <div class="search"><input type="text" id="search3" placeholder=""></div>
                        </div>
                        <div id="searchText" class="search-text"><span>搜索</span></div>
                        <div id="reset" class="reset"><span>重置</span></div>
                    </div>
                </div>

                <!--  <div class="search-box2">
                    <div class="sx-conditions">筛选条件:</div>
                    <div class="sx-show"><span>名称: 深圳参保</span>
                        <div id="clearBtn" class="show-img"><img src="../../img/lf/u1035.png" alt=""></div>
                    </div>
                </div> -->
            </div>
            <div class="details-box">
                <div class="allDetail">
                    <div class="all">
                        <div>全部</div>
                        <span id="all"></span>
                    </div>
                    <div class="prepare">
                        <div>待投保</div>
                        <span id="prepare"></span>
                    </div>
                    <div class="ing">
                        <div>投保中</div>
                        <span id="ing"></span>
                    </div>
                    <div class="over">
                        <div>待停保</div>
                        <span id="over">0</span>
                    </div>
                </div>
                <div class="container">
                    <div id="box">
                        <table>
                            <thead>
                                <tr id="trID">
                                    <th><input type="checkbox" name="" id="checkAll" /></th>
                                    <th>姓名</th>
                                    <th>工号</th>
                                    <th>手机号</th>
                                    <th>所在部门</th>
                                    <th>职位</th>
                                    <th>类型</th>
                                    <th>社保参保状态</th>
                                    <th>公积金参保状态</th>
                                    <th>操作</th>

                                </tr>
                            </thead>
                            <tbody>
                                <!-- <tr>
                              <td>1</td>
                              <td>张三</td>
                              <td>女</td>
                              <td>18</td>
                              <td>
                                <button>编辑</button>
                                <button>删除</button>
                              </td>
                            </tr> -->
                            </tbody>
                        </table>
                        <div class="page-box">
                            <div id="pre">上一页</div>
                            <div id="pages">
                                <!-- <div>1</div>
                            <div>2</div> -->
                            </div>
                            <div id="next">下一页</div>
                        </div>
                    </div>
                    <!-- <div id="modifyModal">
                        <div class="modify-modal-box">
                            <div id="modifyModalContent">
                                <form>
                                    <div class="row">
                                        <label class="col-lg-5">方案名称：</label><input class="col-lg-6" id="dataId"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">参保城市：</label><input class="col-lg-6" id="dataCity"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">社保方案：</label><input class="col-lg-6" id="dataSocial"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">公积金方案：</label><input class="col-lg-6" id="dataAcc"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">操作日期：</label><input class="col-lg-6" id="dataDate"
                                            type="text" />
                                    </div>
                                    <div class="row">
                                        <label class="col-lg-5">操作人：</label><input class="col-lg-6" id="dataPerson"
                                            type="text" />
                                    </div>
                                </form>
                                <!-- form 会导致 自动关闭 -->
                                <!-- <div class="row">
                                    <button class="col-lg-4" id="confirmBtn">确定编辑</button>
                                    <span class="col-lg-4"></span>
                                    <button class="col-lg-4" id="cancelBtn">取消</button>
                                </div> -->
                            </div>
                        </div>
                    </div> 
<!-- 
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        是否删除？
                                    </h4>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                    </button>
                                    <button id="closeModal" type="button" class="btn btn-primary">
                                        确定
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
 -->
                </div>
            </div>
        </div>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            //后端假数据
            let data = [
                { id: "张三1", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "前端开发", type: "全职", socialSecurity: "未参保", AccumulationFund: "未参保", },
                { id: "张三2", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "后端开发", type: "实习", socialSecurity: "已参保", AccumulationFund: "已参保", },
                { id: "张三3", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "前端开发", type: "全职", socialSecurity: "未参保", AccumulationFund: "已参保", },
                { id: "张三4", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "市场部", position: "前端开发", type: "全职", socialSecurity: "已参保", AccumulationFund: "已参保", },
                { id: "张三5", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "后端开发", type: "实习", socialSecurity: "未参保", AccumulationFund: "未参保", },
                { id: "张三6", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "市场部", position: "前端开发", type: "外包", socialSecurity: "已参保", AccumulationFund: "未参保", },
                { id: "张三7", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "前端开发", type: "实习", socialSecurity: "已参保", AccumulationFund: "已参保", },
                { id: "张三8", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "后端开发", type: "全职", socialSecurity: "未参保", AccumulationFund: "已参保", },
                { id: "张三9", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "前端开发", type: "实习", socialSecurity: "已参保", AccumulationFund: "已参保", },
                { id: "张三10", WorkNumber: "zhangsan01", phoneNumber: "136****0001", department: "研发部", position: "后端开发", type: "全职", socialSecurity: "未参保", AccumulationFund: "已参保", },

            ];

            $("#yui").on("click", function () {
                console.log(1)
            })

            const pageSize = 6;

            function renderTbody(data, currentPage = 1) {
                // 渲染分页
                renderPaging(data, currentPage);
                /* console.log("当前", currentPage); */
                const startIndex = pageSize * (currentPage - 1);
                const endIndex = pageSize + startIndex;

                const dataByPaging = data.slice(startIndex, endIndex);

                // 动态渲染
                // 清空
                $("tbody").empty();
                for (let i = 0; i < dataByPaging.length; ++i) {
                    const item = dataByPaging[i];

                    if (item.socialSecurity === "未参保" && item.AccumulationFund === "未参保" == true) {
                        
                        $("tbody").append(`
                            <tr>
                                
                                <td><input type="checkbox"></td>
                              <td> ${item.id}</td>
                              <td>${item.WorkNumber}</td>
                              <td>${item.phoneNumber}</td>
                              <td>${item.department}</td>
                              <td>${item.position}</td>
                              <td>${item.type}</td>
                              <td>${item.socialSecurity}</td>
                              <td>${item.AccumulationFund}</td>
                              <td>
                                
                                <button id="delBtn" data-id="${item.id}" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">投保</button>
                              </td>
                            </tr>
                            <input type="checkbox">
                            `);
                    } else {
                        $("#box tbody").append(`
                           
                        <tr>
                            <th><input type="checkbox"></th>
                              <td> ${item.id}</td>
                              <td>${item.WorkNumber}</td>
                              <td>${item.phoneNumber}</td>
                              <td>${item.department}</td>
                              <td>${item.position}</td>
                              <td>${item.type}</td>
                              <td>${item.socialSecurity}</td>
                              <td>${item.AccumulationFund}</td>
                              <td>
                                
                                <button data-id="${item.id}" class="modify-btn">查看详情</button>
                              </td>
                            </tr>
                            `);
                    }




                }
            }
            renderTbody(data);
            /* 
              渲染页面
            */
            function renderPaging(data, currentPage = 1) {
                $("#pages").empty();
                const num = Math.ceil(data.length / pageSize);
                for (let i = 1; i <= num; ++i) {
                    $("#pages").append(`<div>${i}</div>`);
                }

                $("#pages > div")
                    .eq(currentPage - 1)
                    .addClass("currentPageColor");
            }
            //统计
            const allStr = data.length;
            $("#all").text(allStr);
            let arrNum = []
            for (let i = 0; i < data.length; ++i) {
                const item = data[i];
                if (item.socialSecurity === "未参保" && item.AccumulationFund === "未参保" == true) {
                    arrNum.push(data[i])

                }
            }
            const prepareStr = arrNum.length;
            $("#prepare").text(prepareStr);
            const ingStr = data.length - arrNum.length;
            $("#ing").text(ingStr);

            // 全选
      $("#checkAll").on("click", function (event) {
        if ($("#checkAll").prop("checked") == true) {
          $("tbody input").each(function (event) {
            $(this).prop("checked", true); 
          });
        } else {
          $("tbody input").each(function (event) {
            
            $(this).prop("checked", false);
          });
        }
        renderTbody(currentPage);

        // 还原全选
        $("#checkAll").prop("checked", false);
        
      });
            //搜索
            $("#search1").on("blur", function (event) {
                // 去除前后空格
                let value = event.target.value.trim();
                /* console.log(value) */
                // 判空
                if (!value) {
                    // 原来的数据恢复
                    renderTbody(data);
                    return;
                }
                const searchData = [];
                // value 跟 data 中 每一项 value 进行对比

                for (let i = 0; i < data.length; ++i) {
                    // 是否包含子字符串
                    if (data[i].id.includes(value)) {
                        // 我们要保留原有的数据用于恢复
                        searchData.push(data[i]);
                    }
                }

                renderTbody(searchData);
            });
            $("#search2").on("blur", function (event) {
                // 去除前后空格
                let value = event.target.value.trim();
                /* console.log(value) */
                // 判空
                if (!value) {
                    // 原来的数据恢复
                    renderTbody(data);
                    return;
                }
                const searchData2 = [];
                // value 跟 data 中 每一项 value 进行对比

                for (let i = 0; i < data.length; ++i) {
                    // 是否包含子字符串
                    if (data[i].id.includes(value)) {
                        // 我们要保留原有的数据用于恢复
                        searchData2.push(data[i]);
                    }
                }

                renderTbody(searchData2);
            });
            $("#search3").on("blur", function (event) {
                // 去除前后空格
                let value = event.target.value.trim();
                /* console.log(value) */
                // 判空
                if (!value) {
                    // 原来的数据恢复
                    renderTbody(data);
                    return;
                }
                const searchData = [];
                // value 跟 data 中 每一项 value 进行对比

                for (let i = 0; i < data.length; ++i) {
                    // 是否包含子字符串
                    if (data[i].id.includes(value)) {
                        // 我们要保留原有的数据用于恢复
                        searchData.push(data[i]);
                    }
                }

                renderTbody(searchData);
            });
            //清除筛选
            $("#reset").on("click", function (event) {
                let value = ""
                // 删除 isComplete 为 true 的数据
                /*   for (let i = 0; i < data.length; ++i) {
                      const item = data[i];
                      if (item.isComplete === true) {
                          // 数组删除
                          data.splice(i, 1);
                          i--;
                      }
                  } */
                // 基于新的数据重新渲染
                renderTbody(data);
            });
            // 为每个页码添加点击事件
            $("#pages").on("click", "div", function (event) {
                const currentPage = parseInt($(event.target).text());
                renderTbody(data, currentPage);
            });

            // 处理上一页
            $("#pre").on("click", function (event) {
                // 获取到当前页
                const currentPage = parseInt($("#pages > .currentPageColor").text());
                // 当前页为1  就不能上一页
                if (currentPage === 1) {
                    return;
                }

                renderTbody(data, currentPage - 1);
            });

            // 处理下一页
            $("#next").on("click", function () {
                // 获取到当前页
                const currentPage = parseInt($("#pages > .currentPageColor").text());

                const max = Math.ceil(data.length / pageSize);
                // 当前页为 max 就不能下一页
                if (currentPage === max) {
                    return;
                }

                renderTbody(data, currentPage + 1);
            });

            /* //关闭删除按钮模态框
            $("#closeModal").on("click", function () {
                $('#myModal').modal('hide')
                console.log(1)
 
            }) */
            //展示弹窗
            $("#delBtn").on("click", function () {
                $("#myModal").show();
            })

            // 处理删除
            // $("#closeModal").on("click", function (event) {

            //     const dataId = parseInt($(event.target).attr("data-id"));

            //     $('.modal-backdrop').remove()

            //     // 编辑 data
            //     // 通过id 找到对应数据 并删除
            //     for (let i = 0; i < data.length; ++i) {
            //         // 删除id相同的
            //         if (data[i].id === dataId) {
            //             data.splice(i, 1);
            //         }

            //     }
            //     // 基于新数据  刷新页面
            //     renderTbody(data);

            //     // 隐藏弹窗
            //     $("#myModal").hide();

            // });
            // /* // 关闭弹窗
            // $("#closeModal").on("click", function () {
            //     $("#myModal").hide();
               
            // }); */

            // // 编辑按钮处理
            // $("#box tbody").on("click", ".modify-btn", function (event) {
            //     const dataId = $(event.target).attr("data-id");

            //     // 展示弹窗
            //     $("#modifyModal").show();


            //     const currentData = data.find((item) => {
            //         /* console.log(item.id); */
            //         return item.id === dataId;
            //     });

            //     $("#dataId").val(currentData.id);
            //     $("#dataCity").val(currentData.city);
            //     $("#dataSocial").val(currentData.social);
            //     $("#dataAcc").val(currentData.acc);
            //     $("#dataDate").val(currentData.date);
            //     $("#dataPerson").val(currentData.person);

            // });

            // // 关闭弹窗
            // $("#cancelBtn").on("click", function () {
            //     $("#modifyModal").hide();
            // });

            // // 确认编辑
            // $("#confirmBtn").on("click", (event) => {
            //     // 获取input的值
            //     const id = ($("#dataId").val());


            //     const city = $("#dataCity").val();
            //     const social = $("#dataSocial").val();
            //     const acc = $("#dataAcc").val();
            //     const date = $("#dataDate").val();
            //     const person = $("#dataPerson").val();
            //     /* console.log(id); */

            //     // 编辑 data
            //     for (let i = 0; i < data.length; ++i) {
            //         const item = data[i];
            //         if (item.id === id) {
            //             item.id = id;
            //             item.city = city;
            //             item.social = social;
            //             item.acc = acc;
            //             item.date = date;
            //             item.person = person;
            //         }
            //     }
            //     // 重新渲染
            //     renderTbody(data);
            //     // 隐藏弹窗
            //     $("#modifyModal").hide();
            // });
        </script>



</body>

</html>